<template>
    <div>
        <br><h3 align="left">数据筛选</h3>
        <el-form :inline="true" :model="Form" class="demo-form-inline" align="left" style="margin-top: 1%;">
            <el-form-item label="产品编号：">
                <el-input v-model="Form.ProductCode" placeholder="产品编号"></el-input>
            </el-form-item>
            <el-form-item label="产品名称：">
                <el-input v-model="Form.ProductName" placeholder="产品名称"></el-input>
            </el-form-item>
            <el-form-item label="仓库：">
                <el-select v-model="Form.WarehouseName" placeholder="仓库">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="item in warehouseList" :key="item.warehouseCode" :label="item.name" :value="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="GetInventoryList()">查询</el-button>
                <el-button type="warning" @click="reset()">重置</el-button>
                <el-button type="info" @click="derive(checkList)">导出</el-button>
            </el-form-item>
        </el-form>
        <h3 align="left">数据列表</h3>
        <el-table :data="forewarningList" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="productCode" label="产品编号">
            </el-table-column>
            <el-table-column prop="productName" label="产品名称">
            </el-table-column>
            <el-table-column prop="specs" label="产品规格">
            </el-table-column>
            <el-table-column prop="warehouseName" label="仓库">
            </el-table-column>
            <el-table-column prop="ceiling" label="上限">
            </el-table-column>
            <el-table-column prop="floor" label="下限">
            </el-table-column>
            <el-table-column prop="inventory" label="库存数">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.inventory <= scope.row.floor" type="danger">{{scope.row.inventory}}</el-tag>
                    <el-tag v-else-if="scope.row.inventory >= scope.row.ceiling" type="danger">{{scope.row.inventory}}</el-tag>
                    <el-tag v-else type="success">{{scope.row.inventory}}</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageIndex"
            :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount" align="center" :prev-text="`上一页`" :next-text="`下一页`">
        </el-pagination>
    </div>
</template>
<script>
import XLSX from 'xlsx';
import {GetForewarningDtoApi,GetWarehouseListApi } from "@/api/StatementMange/Forewarning";
export default {
    data() {
        return {
            forewarningList: [],
            warehouseList:[],
            // 表单数据
            Form: {
                ProductCode: "",
                ProductName: "",
                WarehouseName:"",
            },
            // 分页信息
            page: {
                // 当前页码
                pageIndex: 1,
                // 每页显示数量
                pageSize: 5,
                // 总页数
                pageCount: 0,
                // 总记录数
                totalCount: 0,
            },
            // 多选
            checkList: []
        }
    },
    methods: {
        //获取仓库列表
        GetWarehouseList()
        {
            //调用接口获取仓库列表
            GetWarehouseListApi().then(res => {
                //判断接口返回状态
                if (res.data.code == 0) {
                    //将仓库列表赋值给this.warehouseList
                    this.warehouseList = res.data.data;
                }
            })
        },
        //重置表单
        reset()
        {
            //清空form
            this.Form={};
            //调用获取库存列表函数
            this.GetInventoryList();

        },
        //获取库存列表
        GetInventoryList() {
            //定义参数
            let params = {
                code: this.Form.ProductCode,
                pName: this.Form.ProductName,
                pageIndex: this.page.pageIndex,
                pageSize: this.page.pageSize,
                wName: this.Form.WarehouseName,
            };
            //调用接口获取库存列表
            GetForewarningDtoApi(params).then(res => {
                
                this.forewarningList = res.data.data;
                this.page.pageCount = res.data.pageCount;
                this.page.totalCount = res.data.totalCount;
                console.table(this.forewarningList);
            });
        },
        //改变每页显示数量
        handleSizeChange(val) {
            //将每页显示数量赋值给this.page.pageSize
            this.page.pageSize = val;
            //调用获取库存列表函数
            this.GetInventoryList();
        },
        //改变当前页
        handleCurrentChange(val) {
            //将当前页赋值给this.page.pageIndex
            this.page.pageIndex = val;
            //调用获取库存列表函数
            this.GetInventoryList();
        },
        //改变选择列表
        handleSelectionChange(val) {
            //将选择列表赋值给this.checkList
            this.checkList = val;
        },
        //导出库存清单
        derive(checkList) {
            //定义过滤后的数据
            const filteredData = checkList.map(row => {
                return {
                    产品编号: row.productCode,
                    产品名称: row.productName,
                    产品规格: row.specs,
                    仓库: row.warehouseName,
                    上限: row.ceiling,
                    下限: row.floor,
                    库存数: row.inventory,
                }
            });
            //将过滤后的数据转换为表格
            const worksheet = XLSX.utils.json_to_sheet(filteredData);
          
            //设置表格列宽
            worksheet['!cols'] = [{ wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }];
           
            //创建新的工作簿
            const workbook = XLSX.utils.book_new();
            //将表格添加到工作簿中
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

            //将工作簿导出为xlsx文件
            XLSX.writeFile(workbook, '库存预警.xlsx');
        },
    },
   mounted() {
        // 获取库存列表
        this.GetInventoryList();
        // 获取仓库列表
        this.GetWarehouseList();
    },
}
</script>
<style></style>